<template>
	<div class="profile-statistics">
		<UpTitle
			class="!h-9"
			titleT="profile.statistics"
			icon="statistics2"
			iconColor="var(--color-primary)" />
		<div class="h-[10px]" />
		<div class="grid grid-cols-3 gap-2">
			<ProfileStatsItem
				img="betting-stats/bettingCount"
				titleT="betting.bettingCount"
				:value="data?.betCount" />
			<ProfileStatsItem
				img="betting-stats/winTotal"
				titleT="betting.winTotal"
				:value="data?.winCount" />
			<ProfileStatsItem img="betting-stats/stakeTotal" titleT="betting.stakeTotal">
				<div class="flex items-center gap-1">
					{{ amountToK(data?.totalBetAmount, 2) }}
					<BaseCurrency :currency="CurrencyFiatEnum.USD" />
				</div>
			</ProfileStatsItem>
		</div>
	</div>
</template>

<script setup lang="ts">
import { BaseCurrency } from '@/components/base'
import { UpTitle } from '@/components/up'
import { CurrencyFiatEnum } from '@/enums'
import { amountToK } from '@/utils'
import ProfileStatsItem from './profile-stats-item.vue'

defineProps({
	data: {
		type: Object
	}
})
</script>

<style scoped></style>
